<?php
	include("functions.php");


	$sql = "SELECT COUNT(*) as count FROM multitris
		WHERE DATE_ADD(last_refresh, INTERVAL 1 WEEK) >= NOW()
		LIMIT 1";
	$res = mysql_query($sql) or die("Error: ".mysql_error());
	$r = mysql_fetch_assoc($res);
	$playedLastWeek = $r["count"];

	$sql = "SELECT COUNT(*) as count FROM multitris";
	$res = mysql_query($sql) or die("Error: ".mysql_error());
	$r = mysql_fetch_assoc($res);
	$playedTotal = $r["count"];


	$sql = "SELECT last_refresh FROM multitris
		ORDER BY last_refresh DESC
		LIMIT 1";
	$res = mysql_query($sql) or die("Error: ".mysql_error());
	$r = mysql_fetch_assoc($res);
	$lastGame = date('j F - H:i', strtotime($r["last_refresh"]));


	$sql = "SELECT HOUR(last_refresh) as hour, COUNT(*) as count FROM multitris
		GROUP BY HOUR(last_refresh)";
	$res = mysql_query($sql) or die("Error: ".mysql_error());
	$hours = array();
	while ($r = mysql_fetch_assoc($res)) {
		$hours[$r["hour"]] = $r["count"];
	}

	$max = max($hours);


	
	$sql = "SELECT * FROM multitris_highscore ORDER BY score DESC";
	$res = mysql_query($sql) or die("Error: ".mysql_error());

	$highscore = array();
	while ($r = mysql_fetch_assoc($res)) {
		$r["players"] = explode("\\", $r["players"]);
		$num = count($r["players"]);

		//if (!isset($highscore[$num]) || $highscore[$num]["score"] < $r["score"]) {
		//	$highscore[$num] = array("score"=>$r["score"], "gamename"=>$r["gamename"]);
		//}
		$highscore[$num][] = array("score"=>$r["score"], "level"=>$r["level"], "gamename"=>$r["gamename"], "time"=>$r["time"], "players"=>$r["players"]);
	}
	ksort($highscore);

?>
<html>
<head>
	<title>Multitris</title>

	<script src="ajax.js"></script>
	<script>

	function update() {
		ajax.send("getlist");
	}

	setInterval("update()", 15000);
	update();

	function linkToGame(gamename, num, active) {
		var playername = document.getElementById("playername").value;
		var act = (active ? "Active: " : "");
		if (playername != "Player name" && playername != "") {
			return "<a id='serveritem"+num+"' class='browserlink' href='generatejnlp.php?playername="+playername+"&gamename=" + gamename + "'>" + act + gamename + "</a>";
		} else {
			return "<a onclick='alert(\"You must enter a name before joining a game.\"); return false;' id='serveritem"+num+"' class='browserlink' href='generatejnlp.php?playername="+playername+"&gamename=" + gamename + "'>" + act + gamename + "</a>";
		}
	}

	function fixHTML() {
		var playername = document.getElementById("playername").value;
		var i=0;
		while (true) {
			var item = document.getElementById("serveritem"+i);
			if (item == null) break;
			i++;

			var gamename = item.innerHTML;
			item.href = "generatejnlp.php?playername="+playername+"&gamename=" + gamename;
			if (playername != "Player name" && playername != "") {
				item.onclick = "";
			} else {
				item.onclick = "alert(\"You must enter a name before joining a game.\"); return false;";
			}
		}
	}

	function updateServerList(serverList) {
		var elem = document.getElementById("servers");

		if (elem == null) return;

		var str = '<table width="100%" class="serverbrowser" cellspacing="0">';
		var len = 0;
		for (i in serverList) {
			str += '<tr class="browser'+((len%2) + 1)+'">';
			str += '<td width="200" class="browsertd">';
			str += linkToGame(serverList[i]["server_name"], len, serverList[i]["active"]=="1");
			str += '</td>';
			str += '<td class="browsertd">';
			str += '?/'+serverList[i]["max_players"];
			str += '</td>';
			str += '</tr>';
			len += 1;
		}
		if (len == 0) {
			str += "<tr><td colspan='2'><center>No open servers online</center></td></tr>";
		}
		str += "</table>";

		elem.innerHTML = str;
	}

	var lastShown = -1;

	function viewHighscore(numPlayers) {
		var o = document.getElementById("highscore");
		o.style.display = "block";

		if (lastShown != -1) {
			document.getElementById("num"+lastShown).style.display = "none";
		}
		lastShown = numPlayers;
		document.getElementById("num"+lastShown).style.display = "block";
	}

	function hideHighscore() {
		var o = document.getElementById("highscore");
		o.style.display = "none";
	}

	function showScreenshot(url) {
		var o = document.getElementById("screenshot");
		o.style.display = "block";
		var img = document.getElementById("screenshotImage");
		img.src = url;
	}

	function hideScreenshot() {
		var o = document.getElementById("screenshot");
		o.style.display = "none";
	}

	</script>

<style>
		body {
			background-color: #223344;
			color: #ffffff;
			font-family: verdana,helvetica,arial;
			font-size: 12px;
		}
		td {
			color: #ffffff;
			font-family: verdana,helvetica,arial;
			font-size: 12px;
		}
		#logo {
			border-width: 0px 10px 0px 10px;
			border-color: #102030;
			border-style: solid;
			width: 700px;
			position: absolute;
			left: 50%;
			margin-left: -375px;
			background-color: #335589;
			padding: 10px;

			margin-top: 20px;
			height: 60px;
		}
		#main {
			border-width: 0px 0px 0px 10px;
			border-color: #102030;
			border-style: solid;
			width: 405px;
			position: absolute;
			left: 50%;
			margin-left: -375px;
			background-color: #335589;
			padding: 10px;

			margin-top: 115px;
		}
		#side {
			border-width: 0px 10px 0px 0px;
			border-color: #102030;
			border-style: solid;
			width: 260px;
			position: absolute;
			left: 50%;
			margin-left: 75px;
			background-color: #335589;
			padding: 10px;

			min-height: 200px;
			margin-top: 115px;
		}
		.logotext {
			font-size: 48px;
			font-family: verdana,helvetica,arial;
			letter-spacing: -5px;
			color: #ffffff;
		}
		.logotext2 {
			font-size: 16px;
			font-family: verdana,helvetica,arial;
			letter-spacing: -1px;
			color: #ffffff;
		}
		.header1 {
			font-size: 22px;
			font-family: verdana,helvetica,arial;
			letter-spacing: -1px;
			color: #ffffff;
		}
		.header2 {
			font-size: 12px;
			font-weight: bold;
			font-family: verdana,helvetica,arial;
			color: #ffcc00;
		}
		.playlink {
			font-size: 18px;
			text-decoration: none;
			color: #ffffff;
			background: #003366;
			padding: 3px;
			border: 2px solid #002244;
		}
		.playlink:hover{border: 2px solid #ffffff}
		.playlink:active{background:#336699}
		.link1 {
			font-size: 12px;
			text-decoration: underline;
			font-weight: bold;
			color: #ffffff;
		}
		.link2 {
			font-size: 12px;
			text-decoration: underline;
			color: #ffffff;
		}
		.serverbrowser {
			border-spacing: 0px;
		}
		.browserheader {
			font-weight: bold;
			padding: 3px;
		}
		.browser1 {
			background-color: #003366;
		}
		.browser2 {
			background-color: #004489;
		}
		.browser1:hover {
			background-color: #cc7700;
		}
		.browser2:hover {
			background-color: #cc7700;
		}
		.browsertd {
			padding: 3px;
		}
		.browserlink {
			text-decoration: underline;
			color: #ffffff;
		}
		.browsertext {
			font-size: 10px;
		}
		.nameinput {
			border: 1px solid #001030;
			color: #ffffff;
			background-color: #003366;
			font-family: verdana,helvetica,arial;
			width: 200px;
		}
		.timegraph {
			background: #003366;
		}

		.highscores1 {
			background-color: #003366;
		}
		.highscores2 {
			padding: 3px;
			background-color: #094489;
			border-top: 1px solid #446699;
		}
		.highscores3 {
			padding: 3px;
			background-color: #094489;
			border-top: 1px solid #446699;
		}
		#highscore {
			display: none;
			width: 600px;
			height: 400px;
			padding: 10px;
			overflow: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -215px;
			margin-left: -320px;
			border-width: 10px;
			border-color: #102030;
			border-style: solid;
			background-color: #335589;
			z-index: 9;
		}

		.highscoretable td {
			padding-left: 5px;
			padding-right: 5px;
		}

		
		#screenshot {
			display: none;
			width: 800px;
			height: 600px;
			overflow: visible;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -400px;
			margin-top: -300px;
			/*padding: 10px;
			border-width: 10px;
			border-color: #102030;
			border-style: solid;
			background-color: #335589;*/
			z-index: 9;
		}
		#screenshotImage {
			border-width: 10px;
			border-color: #102030;
			border-style: solid;
			cursor: pointer;
		}

		.highscoreList td {
			cursor: pointer;
		}

		.highscoreList:hover td {
			background: #cc7700;
			cursor: pointer;
		}
	</style>

	<!--[if lte IE 7]>
	    <link rel="stylesheet" type="text/css" href="ie.css" />
	<![endif]-->
</head>
<body>
	<div style="width: 100%; height: 100%;">
	<div id="logo">
		<span class="logotext">
			&nbsp;Multitris
		</span>
		<span class="logotext2">
			(zeta) - A cooperative multiplayer puzzle game
		</span>
		<br />
	</div>
	<div id="screenshot" onclick="hideScreenshot();">
		<img id="screenshotImage" src="" />
		<span style="position: absolute; top: 585px; left: 20px;">Click to close</span>
	</div>
	<div id="highscore">
		<!--<div style="position: absolute; top: 5px; left: 560px; width: 15px; border: 1px solid #000"  onclick="hideHighscore(); return false;"><a href="#" class="link1">X</a></div>-->
		<table style="height: 100%; width: 100%;"><tr><td valign="middle">
		<?php
			foreach ($highscore as $num => $games) {
				echo "<div id='num$num' style='display: none'>\n";
				echo "<h2 style='text-align: center;'>$num players - Top 10</h2>\n";
				?>
				<table width="100%" cellspacing="0" class="highscoretable">
					<tr>
						<td class="highscores1" align="center" style="width: 20px; height: 30px;">
							<i>&nbsp;#</i>
						</td>
						<td class="highscores1" align="left" style="width: 110px;">
							<i>Server name&nbsp;&nbsp;</i>
						</td>
						<td class="highscores1" align="left" style="width: 50px;">
							<i>Score&nbsp;&nbsp;</i>
						</td>
						<td class="highscores1" align="left" style="width: 50px;">
							<i>Level&nbsp;&nbsp;</i>
						</td>
						<td class="highscores1" align="left" style="width: 50px;">
							<i>Time&nbsp;&nbsp;</i>
						</td>
						<td class="highscores1" align="left">
							<i>Players</i>
						</td>
					</tr>
					<?php
					$i = 0;
					foreach ($games as $data) {
						if (++$i > 10) { // only 5 entries per #players
							break;
						}
						$gamename = $data["gamename"];
						if (strlen($gamename) > 16) {
							$gamename = substr($gamename, 0, 16)."...";
						}
						?>
						<tr>
							<td class="highscores2" align="center">
								<?php echo $i; ?>
							</td>
							<td class="highscores3" align="left">
								<?php echo $gamename; ?>
							</td>
							<td class="highscores2" align="left">
								<?php echo $data["score"]; ?>
							</td>
							<td class="highscores2" align="left">
								<?php echo ($data["level"] < 0 ? "?" : $data["level"]); ?>
							</td>
							<td class="highscores3" align="left">
								<?php echo str_pad(intval($data["time"]/60), 2, "0", STR_PAD_LEFT).":".str_pad($data["time"]%60, 2, "0", STR_PAD_LEFT); ?>
							</td>
							<td class="highscores2" align="left">
								<?php echo implode(", ", $data["players"]); ?>
							</td>
						</tr>
						<?php
					}
					?>
				</table>
				<?php
				echo "</div>";
			}
		?>
		<br />
		<br />
		<div style="text-align: right"><a class="link1" href="#" onclick="hideHighscore(); return false;">Close this window</a></div>
		</td></tr></table>
	</div>
	<div id="main">
		<span class="header1">
			<center>
			The game
			</center>
		</span>
		<table width="100%">
		<tr>
			<td>
				<br /><span class="header2">About Multitris</span>
				<br />Multitris is an online cooperative puzzle game. Best of all, it is entirely free. Try it out:
				<br />
				<br />
				<br />
				<center>
				<a href="http://www.swapgeek.com/multitris/multitris.jnlp" class="playlink">
					&nbsp;Play now!&nbsp;
				</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="http://www.swapgeek.com/multitris/applet.html" class="playlink">
					&nbsp;Applet&nbsp;
				</a>
				</center>
				<br />
				<br />
				<br />
				<span class="header2">Easy to play</span>
				<br />Just start the game with the link above. You can play alone or with others. You can also use the online server browser to the right to auto-join new games or to look for active servers.
				<br />
				<br />
				<br />
				<span class="header2">Controls</span>
				<table width="100%">
				<tr>
				<td width="80" align="right">
					[arrows]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					to move, drop or rotate your piece
				</td>
				</tr>
				<tr>
				<td width="80" align="right">
					[1-3]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					to use powerups
				</td>
				</tr>
				<tr>
				<td width="80" align="right">
					[p]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					to pause the game
				</td>
				</tr>
				<tr>
				<td width="80" align="right">
					[q], [tab]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					to see the score board
				</td>
				</tr>
				<tr>
				<td width="80" align="right">
					[WASD]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					alternate move + rotation.
				</td>
				</tr>
				<tr>
				<td width="80" align="right">
					[Space]&nbsp;&nbsp;&nbsp;&nbsp;
				</td>
				<td>
					to drop piece.
				</td>
				</tr>
				</table>

				<br />
				<br />
				<span class="header2">Help</span>
				<br />For more information, see the <a href="http://www.swapgeek.com/multitris/help.html" class="link1">multitris help</a>. To host a game, port 5398 needs to be forwarded to your computer.
				<br />
				<br />
				<br /><span class="header2">Java</span>
				<br />Multitris is a Java (tm) webstart game and so requires Java to play. If you don't have Java installed, don't worry. Installing it is very easy! Just go to <a href="http://www.java.com" class="link1">java.com</a> and fetch it.
				<br />
				<br />
				<br /><span class="header2">Authors and contact</span>
				<br />Multitris was made by Group 23. Any questions are welcome to <a href="mailto:multitris@swapgeek.com" class="link1">multitris@swapgeek.com</a>
				<br />
				<br />
				<br /><span class="header2">Changelog</span>
				<br /><br /><b>Version 1.41</b> (<i>Nov 7 2008</i>) - (Zeta) Updated highscore feature.
				<br /><br /><b>Version 1.40</b> (<i>Nov 6 2008</i>) - (Zeta) Added highscores.
				<br /><br /><b>Version 1.31</b> (<i>Oct 18 2008</i>) - (Epsilon) Reduced lag spikes when observer joins, fixed Preview powerup.
				<br /><br /><b>Version 1.30</b> (<i>Oct 7 2008</i>) - (Epsilon) Added applet version, improved observer mode.
				<br /><br /><b>Version 1.22</b> (<i>Oct 2 2008</i>) - (Delta) Added minimap, fixed a few bugs, updated server list GUI.
				<br /><br /><b>Version 1.21</b> (<i>Oct 1 2008</i>) - (Delta) Added full observer mode. Also, minor GUI updates.
				<br /><br /><b>Version 1.20</b> (<i>Sep 28 2008</i>) - (Delta) You can now join games already running to chat with the players in that game.
				<br /><br /><b>Version 1.15</b> (<i>Sep 24 2008</i>) - (Gamma) Added split piece powerup, cooldown on nuke/gravity (so no double nuke).
				<br /><br /><b>Version 1.10</b> (<i>Sep 22 2008</i>) - (Gamma) Updated GUI, added anti-lag, fixed a few crashes, added alternate move (supports cw & ccw rotation).
				<br /><br /><b>Version 1.00</b> (<i>Spring 2008</i>) - (Beta) First version.
				<br />&nbsp;

			</td>
		</tr>
		</table>
	</div>
	<div id="side">
		<center>
			<span class="header1">
				Screenshot
			</span>
			<br />
			<br />
			<a href="screen10.png" target="_blank" onclick="showScreenshot(this.href); return false;"><img src="screen10Thumb.png" style="border: 4px solid #003366"></a>
		</center>
		<br />
		<br />

		<center>
			<span class="header1">
				Server browser
			</span>
			<br />
			<br />
			<i>Name</i> &nbsp; <input type="text" id="playername" class="nameinput" maxlength="16" value="Player name" onkeyup="fixHTML()" onfocus="this.value = ''" onblur="if (this.value == '') this.value = 'Player name'" />
		</center>
		<br />
		<table width="100%" class="serverbrowser" cellspacing="0">
		<tr>
		<td class="browserheader" width="200">
			Server
		</td>
		<td class="browserheader">
			Players
		</td>
		</tr>
		</table>
		<div id="servers" style="margin: 0; padding: 0;">
		</div>
		<br />
		<br />
		<table width="100%">
		<tr><td class="browsertext">
			If you can't join a game from the browser, just click the "Play now!" link
			to the left and then "Join game" from the menu.
		</td></tr>
		</table>
		<br />
		<br />

		<center>
			<span class="header1">
				Highscores
			</span>
			<br />
			<br />
			<table width="100%" cellspacing="0">
				<tr>
					<td class="highscores1" align="left" style="width: 20px; background: #003366 center right url(players.png) no-repeat;">
						<i>&nbsp;</i>
					</td>
					<td class="highscores1" align="left" style="width: 60px">
						<i>Highest&nbsp;&nbsp;</i>
					</td>
					<td class="highscores1" align="left">
						<i>Best server</i>
					</td>
					<td class="highscores1" align="right" style="width: 30px">
						<i>More</i>
					</td>
				</tr>
				<?php
				foreach ($highscore as $num => $data) {
					$data = $data[0];
					$gamename = $data["gamename"];
					if (strlen($gamename) > 16) {
						$gamename = substr($gamename, 0, 16)."...";
					}
					?>
					<tr onclick="viewHighscore(<?php echo $num;?>); return false;" class="highscoreList">
						<td class="highscores3" align="left">
							<?php echo $num; ?>
						</td>
						<td class="highscores3" align="left">
							<?php echo $data["score"]; ?>
						</td>
						<td class="highscores3" align="left">
							<?php echo $gamename; ?>
						</td>
						<td class="highscores3" align="center">
							<span style="border: 1px solid #aaa">+</span>
						</td>
					</tr>
					<?php
				}
				?>
			</table>
		</center>

		<br />
		<br />

		<center>
			<span class="header1">
				Statistics
			</span>
			<br />
			<br />
			Total games: <?php echo $playedTotal; ?><br />
			Games last week: <?php echo $playedLastWeek; ?><br />
			Last game: <?php echo $lastGame; ?><br />
			<br />
			<table width="100%" height="100px" cellspacing="0" cellpadding="0" style="border: 1px solid #000000"><tr>
				<?php
				for ($i=0; $i<24; $i++) {
					$height = $hours[$i]/$max * 100;
					echo "<td valign='bottom' width='4%'>
						<div style='height: ".$height."px; overflow: hidden;' class='timegraph'>&nbsp;</div>
						</td>";
				}
				?></tr><tr>
				<?php
				for ($i=0; $i<24; $i+=3) {
					echo "<td colspan='3' class='browsertext' style='border-top: 1px solid #000000'>".$i."</td>";
				}
				?>
			</tr></table>
		</center>
	</div>
	</div>
</body>
</html>